<template>
    <nav-header title="表单记录" class="form-history">
		<u-tabs :current="tabActive" :list="tabList" :activeStyle="{color: '#2d58cb'}" :inactiveStyle="{ color: '#323233'}"
			itemStyle="padding-left: 0px; padding-right: 0px; height: 44px;width: 50%;align: center;background-color: #ffffff"
			lineWidth="25" lineColor="#2d58cb" @change="({index})=>{
				tabActive = index;
				reloadData();
			}"></u-tabs>
		<scroll-view v-if="showFormListTab" class="w-full whitespace-no-wrap mt-3 mb-4" :scroll-x="true" :scroll-with-animation="true">
			<view v-for="(item,index) in formTabList" :key="index" class="inline-block py-2 px-3_5 ml-2 rounded-full text-sm"
				:class="[curFormListTab == item.dictValue? 'bg-theme text-white':'bg-gray-200 text-gray-99']"
				@click="curFormListTab = item.dictValue;reloadData()" v-text="item.dictLabel">
			</view>
		</scroll-view>
        <my-page ref="mypage" v-model="formList" @load-data="loadData">
            <template slot="content">
                <view v-for="(item,index) in formList" :key="item.id" class="bg-white mb-4 rounded mx-4 z-10 last:mb-4 active:bg-gray-50 rounded-lg"
					@click="openDetail(item)">
					<view class="p-4">
						<view class="flex items-center justify-between">
						    <view class="flex items-center text-current ">
						        <i class="iconfont icon-paishua"></i>
						        <view class="pl-2 text-black-32 font-bold" v-text="item.typeName"></view>
						    </view>
						    <view class="pt-1 text-sm text-gray-99">{{$util.getFormatDate(item.createTime, 'yyyy-0m-0d') || ''}}</view>
						</view>
						<view class="pt-3 text-black-32 font-bold">{{item.name}}</view>
						<view v-if="item.status != 'draft'" class="text-sm mt-2">
							<text class="text-gray-99">状态：</text>
							<text :class="[item.status == 'approve'? 'text-yellow-500':(item.status == 'notPass'? 'text-red-500':'text-color-theme')]"
								v-text="statusObj[item.status]"></text>
						</view>
						<view v-if="(item.status == 'notPass' || item.status == 'pass') && item.remark" class="text-sm text-gray-99 mt-1" v-text="'原因：' + item.remark"></view>
					</view>
                    <view class="border-gray-100 border-t mt-2 px-2 relative text-center text-sm">
                        <view class="text-blue-500 py-3">点击{{item.status == 'draft'?'编辑':'查看'}}</view>
                        <view v-if="item.status == 'draft'" @click.stop.prevent="deleteDraft(item, index)" class="h-full z-50 text-red-500 px-4 py-3 absolute top-0 right-0">删除</view>
                    </view>
                </view>
            </template>
        </my-page>
		<view v-if="user.token && showAddBtn" class="fixed bottom-10 right-5 rounded-full p-3 bg-theme" @click="()=>{
			let code = curFormListTab == '-1'? formCode:curFormListTab;
			$util.myNavigateTo('/pages_form/detail/index?formCode=' + code);
		}">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
    </nav-header>
</template>
<script>
import {mapState} from 'vuex'
import MyPage from '@/components/my_page.vue'
import NavHeader from '@/components/nav_header.vue'
import {getMyFormHistoryList, delLogmaster,getFormList} from '@/interface/junchuang/form'
import * as systemApi from '@/interface/common/system.js'
export default {
    components: { NavHeader, MyPage },
    data(){
        let fomView = this.$store.state.formView;
		let formTabList = [{dictLabel: '全部', dictValue: '-1'}].concat(fomView.applyFormList)
        return {
            formList: [],
			params: {},
			tabActive: 0,
			formCode: '',
			showAddBtn: false,
			curFormListTab: '-1',
			showFormListTab: false,
			formTabList: formTabList,
			tabList: [{
					name: '已提交',
				},{
					name: '草稿',
				}
			],
			statusObj: {
				approve: '审批中',
				complete: '完成',
				pass: '通过',
				notPass: '不通过'
			}
        }
    },
	computed: {
		...mapState({
			user: state => state.user,
			system: state => state.system
		})
	},
	onLoad(e) {
		this.formCode = e.formCode || ''
		this.showAddBtn = e.showAddBtn? e.showAddBtn:false
		this.showFormListTab = e.showFormListTab? e.showFormListTab:false
	},
	onShow() {
    this.$util.openShare();
		if (this.formList.length > 0) this.reloadData()
	},
    methods:{
        loadData(page, success, error){
			const v = this
            Object.assign(v.params, page, {
				status: v.tabActive === 1? 'draft':'',
				notInStatus: v.tabActive === 1? '':'draft',
				formCode: v.curFormListTab == '-1'? v.formCode:v.curFormListTab
			});
            getMyFormHistoryList(v.params).then(res=>{
				success(res);
            }).catch(err=>{
                error(err);
            });
        },
        openDetail(item){
            this.$util.myNavigateTo('/pages_form/detail/index?formId='+item.formId+'&businessId='+item.id);
        },
        html2Text(htmlTxt){
            if (this.$utils.isBlank(htmlTxt)) return "";
            var reg = new RegExp("<.+?>","g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
            var text = htmlTxt.replace(reg, "");//执行替换成空字符
            return text;
        },
        deleteDraft(item, index){
			const v = this
			v.$util.showModal('删除提示', '即将删除 "'+item.name+'" 表单, 是否继续?', true, '确定', '取消', (res) => {
				delLogmaster(item.id).then(res=>{
					const {code, msg} = res
				    if (code == 200){
				        v.formList.splice(index, 1)
				    }
					v.$u.toast(msg)
				})
			}, (res) => {
				return
			})
        },
		reloadData () {
			this.$refs['mypage'].dataReload()
		}
    },
}
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
